<script setup lang="ts">
import { getHomeBannerAPI, getHomeCategoryAPI, getHomeHotAPI } from '@/services/home'
import type { BannerItem, CategoryItem, HotItem } from '@/types/home'
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'
import CustomNavbar from './components/CustomNavbar.vue'
import HotPanel from './components/HotPanel.vue'
import { useGuessList } from '@/composables'


// 获取轮播图数据
const bannerList = ref<BannerItem[]>([])

// SAIL-0003 接口
const getHomeBannerData = async () => {
  const res = await getHomeBannerAPI()
  bannerList.value = res.result
}


// 是否加载中标记
const isLoading = ref(false)

// 页面加载
// SAIL-0003 调用接口
// onLoad(async () => {
//   isLoading.value = true
//   await Promise.all([getHomeBannerData(), getHomeCategoryData(), getHomeHotData()])
//   isLoading.value = false
// })

// 猜你喜欢组合式函数调用
const { guessRef, onScrolltolower } = useGuessList()
// 当前下拉刷新状态
const isTriggered = ref(false)
// 自定义下拉刷新被触发
const onRefresherrefresh = async () => {
  // 开始动画
  isTriggered.value = true
  // 加载数据
  // await getHomeBannerData()
  // await getHomeCategoryData()
  // await getHomeHotData()

  // 关闭动画
  isTriggered.value = false
}

// 定义 content 变量
const content = ref('First UI 是一套基于uni-app开发的组件化、可复用、易扩展、低耦合的跨平台移动端UI 组件库。')
// data() {
// 	return {
// 		content: 'First UI 是一套基于uni-app开发的组件化、可复用、易扩展、低耦合的跨平台移动端UI 组件库。'
// 	}
// }
// 评分
const change = (e: any): void => {
  // 返回评分 e.score
  console.log(e);
};

// 定义数据
const value1 = ref('value-1');
const value1Id = ref('value-1');
const value2 = ref('value-2');
const value2Id = ref('value-2');
const value3 = ref('value-3');
const value3Id = ref('value-3');
const value4 = ref('value-4');
const value4Id = ref('value-4');
const value5 = ref('value-5');
const value5Id = ref('value-5');
</script>

<template>
  <!-- <fui-button text="默认按钮"></fui-button> -->
  <view class="viewport">
    <!-- 自定义导航栏 -->
    <CustomNavbar />
   <!-- 企业基本信息 -->
   <view class="carousel">
    <view class="carousel-inner">
      <view class="carousel-title">
        <text class="txt-1">企业信息</text>
        <text class="txt-2"> 管理</text>
      </view>
      <view class="carousel-content">
        <view class="carousel-content-item-left">
          <swiper autoplay circular class="carousel-content-item-left-swiper">
            <swiper-item class="carousel-content-item-left-swiper-item">
              <image src="@/static/images/gongsi.jpg" mode="widthFix"></image>
            </swiper-item>
          </swiper>
          <view class="carousel-content-item-left-text">
            <view class="carousel-content-item-left-text-title">
              <view class="position_txt">新华联集团</view>
            </view>
          </view>
        </view>
        <view class="carousel-content-item-right">
          <view class="txt-hang">
            <view class="position_txt1">成员：</view>
            <view class="position_txt2">张三、李四、王五</view>
          </view>
          <view class="txt-hang">
            <view class="position_txt1">法人：</view>
            <view class="position_txt2">张三</view>
          </view>
          <view class="txt-hang position_txt1">营业执照:</view>
          <view class="carousel-content-item-right-pic-box">
            <image class="carousel-content-item-right-pic"
              src="@/static/images/gongsi.jpg"
             mode="widthFix"
            />
          </view>
        </view>
      </view>
    </view>
  </view>
  <!-- 通知 -->
   <view class="notice-bar">
    <fui-notice-bar :content="content" :speed="50" scrollable>
      <view class="fui-icon__box">
        <fui-icon name="notice" :size="36" color="#000000"></fui-icon>
      </view>
    </fui-notice-bar>

   </view>

	<view>

  </view>

  <!-- 工作区 -->
   <view class="work-area-box">
    <view class="carousel-title">
        <text class="txt-1">工作区</text>
    </view>
    <view class="work-area">
        <view class="work-area-item">
          <image
            src="@/static/tabs/隐患排查.png"
            mode="scaleToFill"
          />
          <view class="work-area-item-title">隐患排查</view>
        </view>
        <view class="work-area-item">
          <image
            src="@/static/tabs/应急演练.png"
            mode="scaleToFill"
          />
          <view class="work-area-item">应急演练</view>
        </view>
        <view class="work-area-item">
          <image
            src="@/static/tabs/安全培训.png"
            mode="scaleToFill"
          />
          <view class="work-area-item">安全培训</view>
        </view>
    </view>
  </view>
    <!-- 检查评估 -->
     <view class="work-area-box">
      <view class="carousel-title">
          <text class="txt-1">检查评估</text>
      </view>
      <view class="work-area-inner-box">
          <view class="progress">
            <view>进度：</view>
          <fui-circle :percent="75" color="#FFB703" background="#eee" foreground="#FFB703" gradient="#FAE845" :width="200" :strokeWidth="6" :size="16"></fui-circle>
          </view>
          <view class="progress">
            <!-- <view class="radio-input">
  <radio-group name="value-radio">
    <label class="star s1">
      <radio :value="value1" :id="value1Id">1</radio>
    </label>
    <label class="star s2">
      <radio :value="value2" :id="value2Id">2</radio>
    </label>
    <label class="star s3">
      <radio :value="value3" :id="value3Id">3</radio>
    </label>
    <label class="star s4">
      <radio :value="value4" :id="value4Id">4</radio>
    </label>
    <label class="star s5">
      <radio :value="value5" :id="value5Id">5</radio>
    </label>
  </radio-group>
</view> -->
            <view>评分：</view>
          <fui-circle :percent="75" color="#001e7a" background="#eee" foreground="#a3c7ff" gradient="#7aabff" :width="200" :strokeWidth="6" :size="16"></fui-circle>
          </view>

          <!-- <view class="score">
            <view>评分:</view>
             <view class="score-txt-box">
              <text class="score-txt1">80</text>
             </view>
             <text class="score-txt2">分</text>-->

        </view>
     </view>
  </view>
</template>

<style lang="scss">
page {
  background-color: #f0f3f8;
  height: 100%;
}

// 企业详情
.carousel {
  position: relative;
  width: 94%;
  border-radius: 5px;
  margin: auto;
  margin-top: 15rpx;
  margin-top: 15rpx;
  background: linear-gradient(
    135deg,
    #dde7f6,
    #dde7f6 30%,
    #fff 70%,
    #f8e5d9 95%,
    #f8e5d9
  );
  display: flex;
  flex-direction: column;
}

.carousel-title {
  width: 100%;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.txt-1 {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.txt-2 {
  font-size: 14px;
  color: #666;
  font-weight: 600;
}

.carousel-content {
  display: flex;
  width: 96%;
  padding-bottom: 10rpx;
  flex: 1; /* 让内容区域自适应高度 */
}

.carousel-content-item-left {
  // width: 45%;
  margin: 0 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1; /* 让内容区域自适应高度 */
}

.carousel-content-item-left-swiper {
  width: 100%;
  height: 300rpx;
  border-radius: 5px;
}
.carousel-content-item-left-swiper-item{
  height: 300rpx;
  width: 100%;
}
.carousel-content-item-left-text-title {
  background-color: #fff;
  margin-right: 8px;
  display: inline-block;
  height: 30px;
  margin-bottom: 5px;
  padding: 0 17px;
  position: relative;
  margin-top: 15px;
  border-radius: 20px;
}

.position_txt {
  font-size: 13px;
  font-weight: 550;
  color: #333;
  margin-left: 2px;
  height: 30px;
  margin: 0 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.txt-hang {
  display: flex;
  margin: 5rpx;
}

.position_txt1 {
  font-size: 13px;
  font-weight: 550;
  color: #666;
  margin-left: 2px;
}

.position_txt2 {
  font-size: 13px;
  font-weight: 550;
  color: #333;
  margin-left: 2px;
}

.carousel-content-item-right {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  flex: 1; /* 让右侧内容自适应高度 */
}
.carousel-content-item-right-pic-box{
  width:60%;
  height: 200rpx;
  border-radius: 5rpx;
}
.carousel-content-item-right-pic{
  margin-top: 10rpx;
  width:100%;
  height: 100%;
  border-radius: 5rpx;
}
// 通告栏
.fui-icon__box {
	padding-left: 24rpx;
	padding-right: 12rpx;
}
.notice-bar{
  width: 96%;
  margin: auto;
  border-radius: 5px;
  margin-top: 10rpx;
}
// 工作区
.work-area {
  display: flex;
  justify-content: space-around;

}
.work-area-box{
  width: 96%;
  margin: 10rpx auto;
  background-color: #fff;
  border-radius: 5px;
  padding-bottom:30rpx;
}
.work-area-item{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.work-area-item image{
  width: 45px;
  height: 45px;
}
.work-area-item{
  margin-top: 5px;
    font-size: 12px;
    font-weight: 600;
    color: #333333;
}
.work-area-inner-box{
  width: 96%;
  margin: auto;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.progress{
  display: flex;
  align-items: center;
  justify-content: center;
}
// 评分
.score{
  display: flex;
  align-items: center;
  justify-content: center;
}
.score-txt-box{
  background-color: #f8e5d9;
  border-radius: 50%;
  padding: 50rpx;
  margin:0 20rpx;
}
.score-txt1{
  color: #666;
  font-size: larger;
  font-weight: 600;
  // margin: 0 5rpx;
}
///* From Uiverse.io by Ratinax */
.radio-input {
  display: flex;
  // scale: 0.15;
  transform: rotate(180deg);
}

// .star {
//   margin: 1em;
//   appearance: none;
//   --color: white;
//   border-left: 6.4721359549996em solid transparent;
//   border-right: 6.4721359549996em solid transparent;
//   border-bottom: 4em solid var(--color);
//   transform: rotate(0deg);
//   cursor: pointer;
// }

// .star:before {
//   content: "";
//   border-left: 6.4721359549996em solid transparent;
//   border-right: 6.4721359549996em solid transparent;
//   border-top: 4em solid var(--color);
//   position: absolute;
//   left: -6.4721359549996em;
//   transform: rotate(108deg);
// }

// .star:after {
//   content: "";
//   border-left: 6.4721359549996em solid transparent;
//   border-right: 6.4721359549996em solid transparent;
//   border-top: 4em solid var(--color);
//   position: absolute;
//   left: -6.4721359549996em;
//   transform: rotate(253deg);
// }

// .radio-input > .star:hover ~ .star,
// .radio-input > .star:hover,
// .radio-input > .star:checked ~ .star,
// .radio-input > .star:checked {
//   --color: yellow;
// }

// .radio-input > .star:checked ~ .star,
// .radio-input > .star:checked {
//   animation: grow 0.5s linear forwards;
//   transition: transform 0.3s;
// }

// @keyframes grow {
//   50% {
//     scale: 2;
//   }
// }



</style>
